<template>
  <div class="merchants-box">
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <e-heading>
        {{ (!id ? '新建' : '修改') + '招商' + (!id ? '计划' : '信息')}}
      </e-heading>
      <div class="steps" v-if="!id">
        <el-steps :space="100" :active="active" class="steps-primary">
          <el-step title="项目概况"></el-step>
          <el-step title="设定招商"></el-step>
          <el-step title="方案详情"></el-step>
          <el-step title="提交成功，待审核"></el-step>
        </el-steps>
      </div>
      <div class="contentMiddle" v-if="id">
        <ul class="el-menu el-menu--horizontal match-menu">
          <router-link tag="li" :to="'/sponsor/merchants/edit/'+id" class="el-menu-item">项目概况</router-link>
          <router-link tag="li" :to="'/sponsor/merchants/plan/'+id" class="el-menu-item">方案详情</router-link>
          <router-link tag="li" :to="'/sponsor/merchants/set/'+id" class="el-menu-item">设定招商</router-link>
        </ul>
      </div>
      <router-view :active-change="activeChange"></router-view>
    </div>
    <div class="add-button-box" v-if="id">
      <el-button type="warning" @click="submitAudit()">提交审核</el-button>
      <div class="form-help">提交审核前，请先保存修改的信息!</div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import api from 'api/merchants'
  export default {
    computed: {
      ...mapGetters({
        dict: 'merchants_dict',
        form: 'merchants_form'
      })
    },
    data () {
      return {
        id: this.$route.params.id,
        active: 1
      }
    },
    mounted () {
      if (this.id) { // 如果有id,即点编辑的时候带过来的id，即是做编辑操作，才执行getdetailed编辑操作
        this.getdetailed(this.id)
      }
    },
    methods: {
      activeChange (value) {
        this.active = value
      },
      getdetailed (id) { // 招商计划列表-详情,即点编辑的时候，后台所返回的数据需要被填充到表单里的
        let formdata = Object.assign({}, this.form) // 复制一个新的数据对象
        api.merchants_details({id: id}).then((res) => {
          for (let x of res.data.rightsDetailList) {
            x.investmentAmount = x.investmentAmount / 100
            x.realPrice = x.realPrice / 100
          }
          for (var attr in this.form) { // 将返回来的数据做跟我的form里面的数据要一一对应进来，只拿form所需要的数据
            this.form[attr] = res.data[attr]
          }
          formdata.projectList = res.data.sponsorProjectList.map(function (item) { // 将更新的数据form赋值给我要填充的form，只取projecttype，其他的不要
            return item.projectType
          })
          formdata.addressTime = res.data.sponsorAreaList.map(function (item) { // 将更新的数据form转换给我要填充的form
            return {
              areas: [item.province, item.city],
              address: item.detailsAddress,
              activityTime: [item.startTime, item.endTime]
            }
          })
          if (res.data.fodderList) { // 判断附件是否存在，否则数据会报错
            formdata.fileVOList = res.data.fodderList.map(function (item) {
              return {
                name: item.fileName,
                path: item.fileUrl
              }
            })
            this.form.fileVOList = formdata.fileVOList
          }
          this.form.projectList = formdata.projectList // 将转换的数据赋值给原来的form
          this.form.addressTime = formdata.addressTime
          console.log(res, 'res')
        }, () => { // 错误回调，将跳转到品牌列表页
          this.$router.push({path: '/sponsor/merchants'})
        })
      },
      submitAudit () {
        api.submitAudit_update({id: this.id}, {context: this, successMsg: 'none'}).then((res) => {
          this.$message.success('提交成功')
          this.$router.push({path: '/sponsor/merchants'})
        }).catch(() => {
          this.$message.warning('服务器繁忙，请稍后再试！')
          return false
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
.merchants-box{
  overflow:hidden;
  position:relative;
  box-sizing: border-box;
  .match-menu{
    padding:0px;
  }
  .steps{
    border-bottom:0px;
    padding-left:0px;
  }
  .el-step{
    margin-left:20px;
    width:200px !important;
  }
  .add-button-box{
    width:100%;
    min-height:115px;
    position:absolute;
    bottom:0px;
    text-align: center;
    display:table;
    &:before{
      content:"";
      display: inline-block;
      width:100%;
      height:1px;
      background:#eee;
    }
    .el-button{
      min-width: 112px;
      min-height: 40px;
      margin-top: 20px;
    }
  }
  .content{
    margin-bottom: 50px; 
  }
}
.content-wrapper {
  background: #ebf0f5;
}
.contentMiddle {
  background: #fff;
}
.router-link-active,.router-link-exact-active,.router-link-active.el-menu-item:hover,.router-link-exact-active.el-menu-item:hover{
  border-bottom: 2px solid #00bb90;
  color: #00bb90;
}
.match-menu{
  padding: 0 60px;
}
.match-menu li {
  font-size: 16px;
}
</style>
